<template>
  <div>
    <div style="margin-top:60px;">
    <el-menu
      id="m1"
      default-active="0"
      background-color="#f5f5f5"
      :collapse="isCollapse"
    
      >
      <el-submenu :index="i+''"   v-for="(item, i) in menuList" :key="i">

        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </template>
          <el-menu-item :index="i+'_'+i1+'_'"
            v-for="(sitem, i1) in item.list" :key="i1"
            @click.native="chooseMenu(sitem)"
          >{{sitem.name}}</el-menu-item>
      </el-submenu>
<!-- @click.native="chooseMenu(sitem)" -->
      <el-menu-item index="999" @click="lala">
        <i v-show="!isCollapse" class="el-icon-d-arrow-left"></i>
        <i v-show="isCollapse" class="el-icon-d-arrow-right"></i>

        <span slot="title" >收起</span>
      </el-menu-item>
    </el-menu>
    </div>

  </div>    
</template>

<script>

import { mapGetters } from 'vuex';

export default {
  name: 'menu1',
    data () {
    return {
        isCollapse : false,
    }
  },

  components: {

    
  },

  computed : {
      ...mapGetters([
        'menuList', 
      ]),
  },

  methods : {

      chooseMenu (item) {
          console.log(item);
          this.$router.push({ 
              name: item.href,
          });
      },

      lala () {
          console.log('lala');
          this.isCollapse = !this.isCollapse;
      }
  },

  watch:{
      
  },

  mounted () {
    
    
  },

}
</script>

<style scoped>
#m1:not(.el-menu--collapse) {
    width: 200px;
    /*min-height: 400px;*/
    /*margin-top: 60px;*/
}
</style>
